<template>
  <div class="vue-map clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://lbs.amap.com/api/javascript-api/guide/abc/quickstart">https://lbs.amap.com/api/javascript-api/guide/abc/quickstart</a></span>
        </div>
      </el-card>
      <div id="container"></div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import ICountUp from 'vue-countup-v2'

export default {
  name: 'VueMap',
  components: {
    ICountUp
  },
  data () {
    return {

    }
  },
  mounted () {
    /* eslint-disable */
    var map = new AMap.Map('container', {
      zoom: 11, // 级别
      center: [116.397428, 39.90923], // 中心点坐标
      viewMode: '3D'// 使用3D视图
    })
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin([
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.OverView',
      'AMap.MapType',
      'AMap.Geolocation'
    ], function () {
    // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.addControl(new AMap.ToolBar())

      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale())

      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      map.addControl(new AMap.OverView({isOpen: true}))

      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.addControl(new AMap.MapType())

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      map.addControl(new AMap.Geolocation())
    })

    var marker = new AMap.Marker({
      position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '北京'
    })

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker)

    // 绑定事件
    map.on('click', this.clickHandler)
    /* eslint-enable */
  },
  methods: {
    clickHandler (e) {
      alert('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-map{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
    #container {
      width:100%;
      height: 380px;
    }
  }
}
</style>
